<template>
  <div class="container" style="height: 100%; overflow: auto">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">基本配置</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/staiff_info',
            query: {
              employeeId: this.employeeId,
              judge: this.judge,
              teamOrg: this.teamOrg,
            },
          }"
          ><div class="div3">员工详情</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">权限管理</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="content">
      <el-input
        style="margin: 0 0px 20px"
        placeholder="输入关键字进行搜索"
        v-model="filterText"
      ></el-input>
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :filter-node-method="filterNode"
        :props="defaultProps"
        :check-strictly="strictly"
        :default-expanded-keys="['']"
        :default-checked-keys="getArray"
        @check-change="checkChange"
      >
      </el-tree>
      <div class="backTop">
        <template>
          <el-backtop target=".container" :visibility-height="100">
            置顶
          </el-backtop>
        </template>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="saveLimits">确定</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      getArray: [],
      strictly: true, //父子关系
      employeeId: "",
      judge: "",
      teamOrg: "",
    };
  },
  created() {
    this.tree();
    this.employeeId = this.$route.query.employeeId;
    this.judge = this.$route.query.judge;
    this.teamOrg = this.$route.query.teamOrg;
    this.personalLimit();
  },
  methods: {
    // 个人权限查询
    personalLimit() {
      this.strictly = true;
      this.axios
        .get("/sys/v1/user/permission/get?employeeId=" + this.employeeId, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("个人权限查询");
          console.log(res);
          if (res.code == 0) {
            this.getArray = res.data.menuButtonIds;
            this.$refs.tree.setCheckedNodes(this.getArray);
            this.strictly = false;
          }
        });
    },
    // 保存个人权限
    saveLimits() {
      this.getArray = this.$refs.tree
        .getHalfCheckedKeys()
        .concat(this.$refs.tree.getCheckedKeys());
      this.strictly = false;
      this.axios
        .post(
          "/sys/v1/user/employee/permission/save",
          {
            request: {
              employeeId: this.employeeId,
              menuButtonIds: this.getArray,
              permissionIds: [],
              userId: sessionStorage.getItem("user_id"),
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.$message.success("绑定成功");
            this.$router.push({
              name: "staiff_info",
              query: {
                employeeId: this.employeeId,
                judge: this.judge,
                teamOrg: this.teamOrg,
              },
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    checkChange() {
      this.strictly = false;
    },
    tree() {
      this.axios
        .post(
          "/sys/v1/menu/button/tree/select",
          {
            request: {},
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.data = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // getCheckedKeys() {
    // 	this.getArray = this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys());
    // },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.header {
  font-size: 15px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.content {
  padding: 10px;
  background: #fff;
  // height:90%;
  // overflow-y: scroll;
  position: relative;
}
.content::-webkit-scrollbar {
  display: none;
}
.btn {
  margin: 30px 0 10px;
}
/deep/.el-tree-node__expand-icon {
  font-size: 16px;
}
/deep/.el-tree-node__label {
  font-size: 15px;
}
/deep/.el-button {
  padding: 8px 10px;
}
.backTop:hover {
  cursor: pointer;
}
/deep/.el-backtop {
  font-size: 14px;
}
</style>
